import { useState } from "react";

import "./index.scss";

interface StepType {
  key: number;
  text: string;
}

export default function ProgressSteps() {
  const [current, setCurrent] = useState(0);

  const stepsList: StepType[] = [
    { key: 1, text: "1" },
    { key: 2, text: "2" },
    { key: 3, text: "3" },
    { key: 4, text: "4" },
  ];

  return (
    <div className='progress-steps-box'>
      <ul className='progress-steps'>
        <div
          className='psbs-progress'
          style={{ width: (current / (stepsList.length - 1)) * 100 + "%" }}
        ></div>
        {stepsList.map(item => (
          <li
            className='psbs-item'
            id={String(item.key)}
            key={item.key}
            style={{
              borderColor: item.key < current + 2 ? "#3498db" : "#e0e0e0",
            }}
          >
            {item.text}
          </li>
        ))}
      </ul>
      <div className='psb-control'>
        <button
          style={{
            backgroundColor: current > 0 ? "#3498db" : "#e0e0e0",
          }}
          onClick={() => {
            current > 0 && setCurrent(c => c - 1);
          }}
        >
          Prev
        </button>
        <button
          style={{
            backgroundColor:
              current < stepsList.length - 1 ? "#3498db" : "#e0e0e0",
          }}
          onClick={() => {
            current < stepsList.length - 1 && setCurrent(c => c + 1);
          }}
        >
          Next
        </button>
      </div>
    </div>
  );
}
